<template>
  <div class="person">
    <h1>情况四：监视 reactive 定义的对象类型数据</h1>
    <h2>当前姓名为：{{ person.name }}</h2>
    <h2>当前年龄为：{{ person.age }}</h2>
    <h2>car1:{{ person.car.c1 }}</h2>
    <h2>car2:{{ person.car.c2 }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeFirstCar">修改第一台车</button>
    <button @click="changeSecondCar">修改第二台车</button>
    <button @click="changeCar">修改整车</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script setup lang="ts">
import {reactive, watch} from 'vue';
let person=reactive({
  name:'张三',
  age:18,
  car:{
    c1:'奔驰',
    c2:'宝马'
  }
})
function changeName(){
  person.name='李四'
}
function changeAge(){
  person.age=20
}
function changeFirstCar(){
  person.car.c1='保时捷'
}
function changeSecondCar(){
  person.car.c2='奥迪'
}
function changeCar(){
  person.car={
    c1:'保时捷',
    c2:'奥迪'
  }
}
watch(()=>person.name,(value, oldValue)=>{
  console.log(`姓名由${oldValue}变为${value}`)
})
watch(()=>person.car,(value, oldValue)=>{
  console.log('person.car变化了',value,oldValue)
},{deep:true})
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  padding: 0 5px;
  margin: 5px;
}

li {
  font-size: 20px; /* 修正拼写错误 */
}
</style>